/*
 * @Author: jk 
 * @Date: 2021-01-13 10:12:14 
 * @Last Modified by: 小菜鸡
 * @Last Modified time: 2021-05-07 22:49:14
 */
.left {
  // background-color: #fff;
  margin-top: 10px;
  padding: 20px 16px;
  border-radius: 0.3rem;
  // border-bottom: 1px solid #eee;
  text-align: center;
  // box-shadow: 0 4px 8px 0 rgba(28, 31, 33, 0.08);
  min-height: calc(100vh - 100px);

  .listWrap{
    // min-height: calc(100vh - 45px);
    .listItem {
      margin: 0.5rem auto;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      cursor: pointer;
      // transform: scale(1.05);
      transition: opacity 0.25s, transform 0.3s, box-shadow 0.4s;

      .context {
        height: 120px;
        color: #777;
        margin: 0.5rem;
        overflow: hidden;
        text-align: left;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 7;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        font-weight: 500;
      }
      .infoWrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 0.5rem;
        .icons{
          margin-right: 6px;
        }
        // padding-top: .5rem;
      }
    }
    .listItem:hover {
      // transition: opacity 0.25s, transform .3s;
      // box-shadow .4s,transform .4s
      transform: scale(1.05);
      box-shadow: rgb(174, 174, 174) 0px 0px 8px;
    }
  }

  @keyframes shake{
 0% {
        transform: scale(1);
        transform: scale(1)
    }

    70%,73%{
        transform: scale(0.9) rotate(-3deg);
        transform: scale(0.9) rotate(-3deg)
    }

    77%,83%,90%,97%  {
        transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg)
    }

    80%,87%,93%{
        transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg)
    }

    100% {
        transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }
}

  .loadMore{
    margin: 50px auto;
    animation: shake 2s ease infinite;
    &:hover{
    animation: none;

    }
  }
 
}
